<template>
    <div class="permission-page-container" v-loading="isLoading">

        <!-- 顶部的功能介绍和标题 -->
        <div class="page-header">
            <h2 class="page-title">阻止公共访问</h2>
            <p class="page-description">
                阻止公共访问是针对存储桶（Bucket）设置的访问控制功能，用于从全局上管理对存储桶及其内部对象的公共访问。开启此功能可有效降低因意外操作导致的数据泄露风险。
            </p>
        </div>

        <!-- 功能设置区域 -->
        <div class="setting-section">
            <div class="setting-item">
                <div class="setting-text">
                    <div class="setting-title">阻止公共访问</div>
                    <div class="setting-status" :class="isPublicBlockEnabled ? 'is-enabled' : 'is-disabled'">
                        {{ isPublicBlockEnabled ? '已开启' : '已关闭' }}
                    </div>
                    <div class="setting-desc">
                        <p><strong>描述:</strong> 阻止公共访问功能当前为 {{ isPublicBlockEnabled ? '开启' : '关闭' }} 状态。</p>
                        <p v-if="isPublicBlockEnabled" class="warning-text">
                            <strong>注意:</strong> 已开启阻止公共访问，鉴权时将忽略已设置的公共读 ACL、公共读写 ACL 和含有公共访问语义的存储桶策略（Bucket
                            Policy），并禁止创建新的公共权限。
                        </p>
                        <p v-else class="warning-text">
                            <strong>注意:</strong> 关闭阻止公共访问后，您的存储桶可能会有公共访问风险，建议您将 ACL 设置为私有或设置不包含公共语义的存储桶策略。
                        </p>
                    </div>
                </div>
                <div class="setting-action">
                    <el-switch v-model="isPublicBlockEnabled" @change="handleSwitchChange" :loading="isSwitchLoading"
                        size="large" />
                </div>
            </div>
        </div>

        <!-- 常见问题等静态内容 -->
        <div class="faq-section">
            <h3>常见问题</h3>
            <el-collapse>
                <el-collapse-item title="什么是阻止公共访问？" name="1">
                    <div>这是一种安全机制，它会覆盖掉所有ACL和Bucket Policy中的公共权限设置，强制让整个存储桶变为私有，防止因配置失误导致数据意外暴露。</div>
                </el-collapse-item>
                <el-collapse-item title="开启后会影响我已经设置的私有权限吗？" name="2">
                    <div>不会。此功能只针对“公共”权限，所有私有权限的访问不受任何影响。</div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <!-- 在 PublicAccessBlockPage.vue 的 <template> 中 -->
        <ConfirmationDialog v-model:visible="dialogVisible" :title="dialogProps.title"
            :alert-title="dialogProps.alertTitle" :main-description="dialogProps.mainDescription"
            :prompt-prefix="dialogProps.promptPrefix" :confirm-phrase="dialogProps.confirmPhrase"
            :loading="isSwitchLoading" @confirm="onConfirmAction" />

    </div>
</template>

<!-- 文件: frontend/src/views/permissions/PublicAccessBlockPage.vue -->
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import apiClient from '@/api';
import { ElMessage } from 'element-plus';
import ConfirmationDialog from '@/components/ConfirmationDialog.vue';

const route = useRoute();
const bucketName = ref(route.params.bucketName);

const isLoading = ref(true);
const isSwitchLoading = ref(false);
const isPublicBlockEnabled = ref(false);
const dialogVisible = ref(false);

// 【核心修正】确保这里的属性名与 ConfirmationDialog 组件的 props 一致
const dialogProps = reactive({
    title: '',
    alertTitle: '',
    mainDescription: '', // <--- 确保是 mainDescription
    promptPrefix: '请确认操作，请输入：',
    confirmPhrase: '',
    targetState: false,
});

const fetchPublicAccessBlockStatus = async () => {
    isLoading.value = true;
    try {
        const response = await apiClient.get(`/api/v1/buckets/${bucketName.value}/public-access-block`);
        isPublicBlockEnabled.value = response.data.is_enabled;
    } catch (error) {
        ElMessage.error('获取“阻止公共访问”状态失败');
        console.error('Failed to fetch public access block status:', error);
    } finally {
        isLoading.value = false;
    }
};

const handleSwitchChange = (newValue) => {
    isPublicBlockEnabled.value = !newValue;

    if (newValue) {
        dialogProps.title = '确定开启阻止公共访问？';
        dialogProps.alertTitle = '开启公共访问提示';
        // 【核心修正】为 mainDescription 赋值
        dialogProps.mainDescription = '开启阻止公共访问后，鉴权时将忽略已有的公共读 ACL、公共读写 ACL 和含有公共访问语义的存储桶策略（Bucket Policy），并不再允许创建新的公共读 ACL、公共读写 ACL 和含有公共访问语义的存储桶策略（Bucket Policy）；<br/>请确认您的业务为不需要公共访问的业务。若您需要公共访问，请勿开启。';
        dialogProps.promptPrefix = '确定开启阻止公共访问，请输入：';
        dialogProps.confirmPhrase = '我确认开启阻止公共访问';
    } else {
        dialogProps.title = '确定关闭阻止公共访问？';
        dialogProps.alertTitle = '关闭公共访问提示';
        // 【核心修正】为 mainDescription 赋值
        dialogProps.mainDescription = 'OSS 建议您开启阻止公共访问，以降低数据被盗刷和泄漏的风险；<br/>关闭后，您的存储桶则可能会有公共访问风险，建议您将 ACL 设置为私有或设置不包含公共语义的存储桶策略。';
        dialogProps.promptPrefix = '确定关闭阻止公共访问，请输入：';
        dialogProps.confirmPhrase = '我确认关闭阻止公共访问';
    }

    dialogProps.targetState = newValue;
    dialogVisible.value = true;
};

const onConfirmAction = async () => {
    isSwitchLoading.value = true;
    const actionText = dialogProps.targetState ? '开启' : '关闭';
    try {
        await apiClient.put(`/api/v1/buckets/${bucketName.value}/public-access-block`, {
            is_enabled: dialogProps.targetState,
        });
        isPublicBlockEnabled.value = dialogProps.targetState;
        ElMessage.success(`“阻止公共访问”已成功${actionText}！`);
    } catch (error) {
        ElMessage.error(`操作失败: ${error.response?.data?.error || '请重试'}`);
        console.error(`Failed to ${actionText} public access block:`, error);
    } finally {
        isSwitchLoading.value = false;
        dialogVisible.value = false;
    }
};

onMounted(() => {
    fetchPublicAccessBlockStatus();
});
</script>

<style scoped>
.permission-page-container {
    padding: 24px;
    background-color: #fff;
}

.page-header {
    margin-bottom: 24px;
}

.page-title {
    font-size: 20px;
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.page-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.setting-section {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 32px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}

.setting-text {
    flex-grow: 1;
}

.setting-title {
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
}

.setting-status {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
}

.setting-status.is-enabled {
    color: #10b981;
    /* 绿色 */
}

.setting-status.is-disabled {
    color: #ef4444;
    /* 红色 */
}

.setting-desc p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin: 4px 0;
}

.warning-text {
    background-color: #fffbeb;
    border-left: 4px solid #fbbF24;
    padding: 8px 12px;
    border-radius: 4px;
}

.setting-action {
    padding-left: 24px;
}

.faq-section h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
}
</style>